var myApp=angular.module('heatMap',[]);
myApp.controller('mainController', function ($scope) {
    d3.json('data.json',function(data) {
        $scope.data = data;
        $scope.$apply();
    });
});
myApp.directive('heatMap',function(){
    return{
        link: link,
        restrict : 'E',
        scope:{ data : '='}
    }
    function link (scope,element,attr){
        //Drow Guide
        var c20c = d3.scale.category20c();
        var guide = d3.select("#c20c")
                .append("svg")
                .attr("width", 400)
                .attr("height", 20);
            guide.selectAll("circle")
                .data(d3.range(20))
                .enter()
                .append("circle")
                .attr("r", 9)
                .attr("cx", d3.scale.linear().domain([-1, 20]).range([0, 400]))
                .attr("cy", 10)
                .attr("fill", c20c);
        // Drow Heatmap
        var margin = {top: 20, right: 20, bottom: 30, left: 40},
            width = 760 - margin.left - margin.right,
            height = 500 - margin.top - margin.bottom;
        var xScale =scale([0,width],[0,10]);
        var yScale = scale([height,0],[0,36]);
        var colorScale =d3.scale.category20c();
        var xAxis=Axis(xScale,"bottom");
        var yAxis=Axis(yScale,"left");
        var myData=scope.data;
        var svg = d3.select(element[0]).append("svg")
            .attr("width", width + margin.left + margin.right)
            .attr("height", height + margin.top + margin.bottom)
            .append("g")
            .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
        var heatmap=null;
        scope.$watch("data",function(data){
            if(!data){return ;}
            heatmap = svg.selectAll(".heatmap")
                .data(data)
                .enter( ).append("g")
                .attr("class", "heatmap");
            heatmap.selectAll(".bin")
                .data(function (d) { return d.values; })
                .enter( ).append("rect")
                .attr("class", "bin")
                .attr("x", function (d, i) { return xScale(i); })
                .attr("width", function (d, i) { return  xScale(i+1) - xScale(i); })
                .attr("height",12)
                .style("fill", function(d) { return colorScale(d); });

            heatmap.each(function (d) {
                d3.select(this).selectAll(".bin")
                    .attr("y", yScale(d.key) )
                    .on("mouseover", mouseOver)
                    .on("mouseout",mouseOut);
            });
            svg.append("g")
                .attr("class", "x axis")
                .attr("transform", "translate(0," + height + ")")
                .call(xAxis)
                .append('text')
                .text("Courses ")
                .attr("transform", "translate("+width +"," + -1+ ")");

            svg.append("g")
                .attr("class", "y axis")
                .call(yAxis)
                .append('text')
                .text("Student ID ");
        },true);

        function mouseOver() {
            d3.select(this)
                .style("stroke-width", 4).style("stroke", "white")
                .append('title')
                .text('u click me ');
            //.text( function(d){return d.key;});
        }
        function mouseOut() {
            d3.select(this)
                .style("stroke-width", 1)
                .append('title')
                .text('');

        }
        function scale(range, domain)
        {
            return d3.scale.linear().range(range).domain(domain);
        }

        function Axis(Scale, Direction)
        {
            return d3.svg.axis().scale(Scale).orient(Direction);
        }

    }

});






